<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>烟花秀 | 表白特效</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="ui">
      <div class="title">烟花秀 · 表白</div>
      <div class="controls">
        <button data-mode="classic" class="active">经典烟花</button>
        <button data-mode="heart">爱心烟花</button>
        <button data-mode="emoji">Emoji烟花</button>
        <button data-mode="pro">专业烟花</button>
        <button data-mode="tsp">星空烟花</button>
        <button id="toggle">暂停</button>
        <button id="shareLink">分享链接</button>
        <button id="downloadShot">下载截图</button>
      </div>
      <div class="message-bar">
        <input id="confessText" type="text" placeholder="输入你的表白语，例如：亲爱的，愿意和我在一起吗？" />
        <button id="showMsg">显示表白</button>
        <button id="hideMsg">隐藏表白</button>
      </div>
    </div>

    <div id="overlay" class="hidden">
      <div id="overlayText">爱你到天荒地老</div>
    </div>

    <canvas id="canvas"></canvas>
    <!-- fireworks-js 容器（专业烟花模式） -->
    <div id="fwjs" class="fireworks-container" aria-hidden="true"></div>
    <!-- tsParticles 容器（星空烟花模式） -->
    <div id="tsparticles" class="tsparticles-container" aria-hidden="true"></div>

    <footer>
      点击屏幕任意位置可触发烟花 ~
    </footer>

    <script src="fireworks.js"></script>
  </body>
  </html>